<template>
	<ul class="todo-list">
		<!-- completed: 完成的类名 -->
		<li :class="{completed:item.isDone}" v-for="item in showList" :key="item.id">
			<div class="view">
				<input class="toggle" type="checkbox" :checked="item.isDone"
				@change="changeDoneFn(item.id)"/>
				<label>{{item.name}}</label>
				<button class="destroy" @click="delFn(item.id)"></button>
			</div>
		</li>
	</ul>

</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		computed:{
			//state相当于仓库，取list即可
			...mapState('todos',['list']),
			...mapGetters('todos',['showList'])
		},
		methods:{
			...mapMutations('todos',['changeDoneFn','delFn'])
		}
	}
</script>
